<template>
  <div class="material-list">
    <div class="module">
      <div class="top">
        <div class="text">组件库</div>
        <div class="search" v-show="isCharts">
          <chart-search
            v-show="isCharts"
            :menuOptions="menuOptions"
          ></chart-search>
        </div>
      </div>
      <div class="menu">
        <div class="one">
          <div
            v-for="(menu, key) in componentMenu"
            :key="menu.type"
            :class="[oneActive == key ? 'active' : '', 'm-item-one']"
            @click="selectOne(key)"
          >
            <div class="icon">
              <el-icon><component :is="menu.icon" /></el-icon>
            </div>
            <div class="label">{{ menu.label }}</div>
          </div>
        </div>
        <div class="two" v-show="isCharts">
          <div
            v-for="child of twoMenu"
            :key="child.type"
            :class="[twoActive == child.type ? 'active' : '', 'm-item-two']"
            @click="selectTwo(child.type)"
          >
            {{ child.type }}
          </div>
        </div>
        <div class="three" v-show="isCharts">
          <el-scrollbar :class="[chartMode === 'double' ? 'double' : '']">
            <ChartItemBox
              v-for="child of threeMenu"
              :key="child.key"
              :element="child"
            />
          </el-scrollbar>
        </div>
      </div>
    </div>
    <!-- <div class="layer" v-show="isLayers">
      <div class="top">
        <div class="text">图层</div>
        <div class="operate">
          <chart-change
            :modeList="chartModeList"
            :mode="layerMode"
            @handleChange="changeChartModeType"
          ></chart-change>
        </div>
      </div>
      <div class="bottom">
        <el-scrollbar>
          <draggable
            item-key="id"
            v-model="reverseList"
            ghostClass="ghost"
            @change="onMoveCallback"
          >
            <template #item="{ element }">
              <layer-list-item
                :componentData="element"
                :key="element.id"
              ></layer-list-item
            ></template>
          </draggable>
        </el-scrollbar>
      </div>
    </div> -->
  </div>
</template>
<script setup>
import { ref, reactive, computed, toRefs, watch } from "vue";
import { useStore } from "vuex";
import Draggable from "vuedraggable";
import { componentMenu } from "../../../../packages/index.js";
import ChartItemBox from "../ChartItemBox/index.vue";
import ChartSearch from "./components/ChartSearch/index.vue";
import ChartChange from "./components/ChartChange/index.vue";
import LayerListItem from "./components/LayerListItem/index.vue";
import { cloneDeep } from "lodash";

const store = useStore();
const isCharts = computed(() => store.getters["chartLayoutStore/charts"]);
const isLayers = computed(() => store.getters["chartLayoutStore/layers"]);
const chartMode = computed(() => store.getters["chartLayoutStore/chartType"]);
const layerMode = ref(store.getters["chartLayoutStore/layerType"]);
const reverseList = computed(() => {
  const list = cloneDeep(store.getters["chartEditStore/getComponentList"]);
  return list.reverse();
});

const chartModeList = [
  { label: "缩略图", icon: "Files", value: "thumbnail" },
  { label: "文本列表", icon: "Menu", value: "text" },
];

//初始化菜单
let activeKey = reactive({
  oneActive: "",
  twoActive: "",
  threeActive: "",
});
activeKey.oneActive = componentMenu["charts"].key;
let twoMenu = computed(() => {
  let key = activeKey.oneActive;
  return key ? componentMenu[key].list : componentMenu[0].list;
});
activeKey.twoActive = twoMenu.value[0].type;
let threeMenu = computed(() => {
  let key = activeKey.twoActive;
  let list = [];
  if (key) {
    list = twoMenu.value.find((item) => item.type == key);
  } else {
    twoMenu.value[0].list;
  }
  return list.list;
});

//切换菜单
function selectOne(key) {
  activeKey.oneActive = key;
}
function selectTwo(key) {
  activeKey.twoActive = key;
}

const menuOptions = Object.entries(componentMenu).map((item) => {
  return item[1];
});

watch(
  () => activeKey.oneActive,
  () => {
    activeKey.twoActive = twoMenu.value[0].type;
  }
);

// 修改图表展示方式
const changeChartModeType = (value) => {
  layerMode.value = value;
  store.commit("chartLayoutStore/SET_LAYER_TYPE", value);
};

// 移动结束处理
const onMoveCallback = (val) => {
  const { oldIndex, newIndex } = val.moved;
  if (newIndex - oldIndex > 0) {
    // 从上往下
    const moveTarget = store.getters["chartEditStore/getComponentList"].splice(
      -(oldIndex + 1),
      1
    )[0];
    store.getters["chartEditStore/getComponentList"].splice(
      -newIndex,
      0,
      moveTarget
    );
  } else {
    // 从下往上
    const moveTarget = store.getters["chartEditStore/getComponentList"].splice(
      -(oldIndex + 1),
      1
    )[0];
    if (newIndex === 0) {
      store.getters["chartEditStore/getComponentList"].push(moveTarget);
    } else {
      store.getters["chartEditStore/getComponentList"].splice(
        -newIndex,
        0,
        moveTarget
      );
    }
  }
};

let { oneActive, twoActive } = toRefs(activeKey);
</script>
<style lang="scss" scoped>
.material-list {
  width: 100%;
  height: 100%;
  display: flex;
  border-right: 2px solid #d9d9d9;
  .module {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top {
      // padding: 0 10px;
      height: 8%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #d9d9d9;
      .text {
        flex: 2;
        display: flex;
        justify-content: center;
        font-size: 14px;
        font-weight: bold;
      }
      .search {
        height: 100%;
        flex: 8;
        display: flex;
        flex-flow: wrap;
        justify-content: flex-end;
        align-items: center;
      }
    }

    .menu {
      width: 100%;
      height: 92%;
      display: flex;
      color: #000000;
      .one {
        flex: 2;
        padding: 10px 5px;
        .m-item-one {
          margin-bottom: 5px;
          border-radius: 5px;
          padding: 5px 0;
          .icon {
            text-align: center;
            font-size: 16px;
          }
          .label {
            text-align: center;
            font-size: 14px;
          }
        }
      }
      .two {
        flex: 2;
        padding: 10px 5px;
        // background-color: #1e1e1f;
        border-left: 2px solid #d9d9d9;
        .m-item-two {
          text-align: center;
          margin-bottom: 10px;
          border-radius: 5px;
          padding: 4px 0;
          font-size: 12px;
        }
      }
      .three {
        flex: 6;
        padding: 10px 5px;
        border-left: 2px solid #d9d9d9;
        // background-color: rgb(16, 16, 20);
      }
      .double {
        :deep(.el-scrollbar__view) {
          display: flex;
          justify-content: space-between;
        }
      }
      .active {
        color: #0084fe;
        background-color: #d3eafe;
      }
    }
  }
  .layer {
    width: 37%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-left: 2px solid #888;
    .top {
      height: 8%;
      .text {
        flex: 1;
      }
      .operate {
        height: 100%;
        flex: 2;
        display: flex;
        flex-flow: wrap;
        justify-content: flex-end;
        align-items: center;
      }
    }
    .bottom {
      width: 100%;
      height: 92%;
    }
  }
}
</style>
